2021-03-09 Action Cableを使ったチャットアプリ（お悩み相談）
https://youtu.be/yZe_PmS5HW4
相談内容
メッセージを送信した際、以下のような動きにしたい
送信した本人のメッセージは右に表示する
本人以外のメッセージは左に表示する
現状はすべて右側に表示されてしまう
2021-03-09
Action Cableの概念について、tanaken0515.iconはあまり馴染みがなく、的外れなことを言ってしまったかも もうすこしちゃんと把握してからお答えできると良かった
前半部分で現状の把握に時間を掛けすぎてしまったのも良くなかった
現状はすべて右側に表示されてしまう
これを「左に表示するように実装しているのに右側に表示されてしまう」のだと思っていたので、デバッグ目的で「まずは起きている問題を再現しましょう」っていうことをしていたのだけど、
実際は「すべて右側に表示するように実装してあるのだけど、JSでcurrent_userを把握して左右に出し分ける方法がわからない」という話だった
2021-03-10
ざっくりいうとこの手順でやればいけそう
1. app/channels/application_cable/connection.rb の connect メソッドでログインしているユーザを設定する
deviseを使ったログインと自前実装のログインが混在しているので微妙に大変そう
identified_by を使う
2. app/channels/message_channel.rb の subscribed メソッドで stream_for する
Messageチャンネルに対してログインしているユーザを指定してブロードキャスト(データを配信)できるようになる
3. broadcast_to で配信する
例えばこんな感じ
code:sample.rb
MessageChannel.broadcast_to(room.user, message: message, owned: room.user == message.user)
MessageChannel.broadcast_to(room.cereb, message: message, owned: room.cereb == message.cereb)
4. app/javascript/channels/message_channel.js の received メソッドで表示を切り替える
received(data) { ... } の中で data.owned に true/false が渡ってくるので true なら自分のメッセージとして表示する